<template>
  <div class="notice-list">
    <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 20px;">
          <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>公告</el-breadcrumb-item>
    </el-breadcrumb>


    <el-card>
      <h3 slot="header">公告列表</h3>
      <div class="notice-item" v-for="notice in notices" :key="notice.id">
        <h4>{{ notice.title }}</h4>
        <p>{{ notice.time }}</p>
        <div class="notice-footer">
          <el-button type="text" @click="handleViewNotice(notice)">查看</el-button>
        </div>
      </div>
      <div v-if="notices.length === 0" class="no-data">
        <i class="el-icon-warning"></i>
        <span>暂无数据</span>
      </div>
    </el-card>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[3, 5, 10, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      style="text-align:center; margin-top:20px; ">
    </el-pagination>

  </div>
</template>

<script>
export default {
  data() {
    return {
      notices: [],
      currentPage: 1, // 当前页码
      pageSize: 3, // 每页显示的数据量
      total: 0,// 数据总条数
    };
  },
  created() {
    this.getNotices();
  },
  methods: {
    // 获取公告列表
    getNotices() {
      this.request.get('/notice', {
        params: {
          page: this.currentPage,
          size: this.pageSize
        }
      }).then((response) => {
        const data = response.data
        console.log(data)
        this.notices = data.data.list
        this.total = data.data.total
      }).catch(error => {
        console.log(error)
      })
    },
    // 查看公告详情
    handleViewNotice(notice) {
      this.$router.push({ name: 'AnnDetail', params: { id: notice.id } });
    },
    // 每页显示数据量改变时触发
    handleSizeChange(size) {
      this.pageSize = size
      this.getNotices()
    },
    // 当前页码改变时触发
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.getNotices()
    },
  }
};
</script>

<style scoped>
.notice-list {
  margin: 20px;
}
.notice-item {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 10px;
}
.notice-item h4 {
  font-size: 18px;
  margin-bottom: 10px;
}
.notice-item p {
  color: #666;
  margin-bottom: 10px;
}
.notice-footer {
  display: flex;
  align-items: center;
  color: #999;
}
.no-data {
  display: flex;
  justify-items: center;
  align-items: center;
  height: 150px;
  font-size: 18px;
  color: #999;
}
</style>
